<template>
  <div class="main">
    <div class="tan_chuang">
      <!-- 新建 -->
      <div class="main-el-row-header">
        <div class="header-title">
          <div class="hang_title">
            <div class="one_title">治理状态管理</div>
            <div class="you"></div>
          </div>
          <div>
            <!--<el-button size="small" @click="">禁用</el-button>-->
            <!-- <el-button
                size="medium"
                @click="dialogVisible = true"
                type="primary"
                >新建</el-button
              > -->
          </div>
        </div>
      </div>

      <el-row class="main-el-row-content">
        <el-table
          :data="showData"
          class="my-table"
          height="620px"
          :header-cell-style="{ color: '#84F2FF' }"
          :cell-style="{ color: '#84F2FF' }"
          @row-dblclick="dbclick"
          :cell-class-name="tableCellClassName"
        >
          <el-table-column type="index" label="序号" width="90">
          </el-table-column>
          <el-table-column
            prop="dataName"
            label="数据名称"
            min-width="30%"
            align="left"
          >
          </el-table-column>
          <el-table-column
            prop="schemaId"
            label="治理方案名称"
            min-width="20%"
            align="left"
          >
          </el-table-column>
          <el-table-column
            prop="rowNum"
            label="单次治理条数"
            min-width="16%"
            align="left"
          >
          </el-table-column>
          <el-table-column
            prop="location"
            label="治理数据时间"
            min-width="25%"
            align="left"
          >
          </el-table-column>
          <el-table-column
            prop="lastedRunTime"
            label="最新运行时间"
            align="left"
            min-width="25%"
          >
          </el-table-column>
          <el-table-column label="治理进度" align="left" min-width="30%">
            <template slot-scope="scope">
              <el-progress
                v-if="
                  (isNaN(scope.row.sourceRows / scope.row.targetRows)
                    ? 0
                    : Math.round(
                        (scope.row.targetRows / scope.row.sourceRows) * 10000
                      ) / 100.0) < 100
                "
                :text-inside="true"
                text-color="success"
                status="success"
                :stroke-width="20"
                :percentage="
                  isNaN(scope.row.sourceRows / scope.row.targetRows)
                    ? 0
                    : Math.round(
                        (scope.row.targetRows / scope.row.sourceRows) * 10000
                      ) / 100.0
                "
              ></el-progress>
              <el-progress
                v-else
                :text-inside="true"
                text-color="success"
                status="success"
                :stroke-width="20"
                :percentage="100"
              ></el-progress>
            </template>
          </el-table-column>
          <el-table-column label="状态" align="left" min-width="10%">
            <template slot-scope="scope">
              <el-switch
                v-model="scope.row.status"
                active-color="#13ce66"
                inactive-color="#ff4949"
                @change="begin(scope)"
              ></el-switch>
            </template>
          </el-table-column>
          <el-table-column label="操作" align="left" width="60">
            <template slot-scope="scope">
              <el-button
                type="text"
                @click="editSource(scope.row, 'edit')"
                size="small"
                ><span class="el-icon-edit">编辑</span></el-button
              >
            </template>
          </el-table-column>
        </el-table>
      </el-row>

      <div class="div-el-pagination" v-show="pageFlag">
        <el-pagination
          @current-change="handleCurrentChange"
          :current-page="currentPage"
          :page-size="pageSize"
          background
          layout="prev, pager, next, total, jumper"
          :total="total"
        >
        </el-pagination>
      </div>
    </div>

    <!-- 编辑 -->
    <el-dialog :visible.sync="dialogEdit" width="647px" height="395px">
      <div slot="title" class="dialog-title">
        <el-row class="red">
          <span class="dialog-title-text">编辑</span>
          <span class="dialog-title-you"></span>
          <!-- <el-button type="primary" style="float:right" @click="edit_pr">编辑</el-button> -->
        </el-row>
      </div>
      <el-form :model="form" label-width="150px" ref="form" :rules="rules">
        <el-form-item label="单次治理条数" prop="rowNum">
          <el-input v-model="form.rowNum" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="治理数据时间" prop="location">
          <!-- <el-input v-model="form.location" autocomplete="off"></el-input> -->
          <el-date-picker
            v-model="form.location"
            type="datetime"
            placeholder="选择日期时间"
            value-format="yyyy-MM-dd HH:mm:ss"
          >
          </el-date-picker>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button size="small" class="bg_button" @click="dialogEdit = false"
          >取 消</el-button
        >
        <el-button
          size="small"
          class="bg_button"
          type="primary"
          @click="updateInfo('form')"
          >确 认</el-button
        >
      </div>
    </el-dialog>
  </div>
</template>
  percentage
  <script>
import { post } from "../../utils/request";
export default {
  name: "ConnectionStatus",
  data() {
    let validcodeip = (rule, value, callback) => {
      const reg = /^(([1-9][0-9]{0,3})|10000)$/;
      if (reg.test(value)) {
        callback();
      } else {
        return callback(new Error("输入格式不合法！"));
      }
    };
    return {
      pageSize: 10,
      currentPage: 1,
      showData: null,
      data_type: "",
      dialogEdit: false,
      linshi: "",
      pageFlag: true,
      total: 0,
      currentCell: null,
      form: {
        rowNum: "",
        location: "",
      },
      rules: {
        rowNum: [
          {
            required: true,
            message: "请输入一次接引多少条",
            trigger: "blur",
          },
          {
            validator: validcodeip,
            message: "一次最少输入1条,最多10000条",
            trigger: "blur",
          },
        ],
        location: [
          {
            required: true,
            message: "请选择更新日期",
            trigger: "blur",
          },
        ],
      },
    };
  },
  created() {},
  mounted() {
    this.getadd();
  },
  methods: {
    getadd() {
      this.init();
      this.setTime();
    },
    init() {
      this.getDataferConfigList();
    },
    getDataferConfigList() {
      var params = null;

      params = {
        pageSize: this.pageSize, // 一页有几条数据
        pageNum: this.currentPage, // 当前点击的是第几页
      };
      console.log(params);
      // 发送请求
      post("/api/idatamanage/dataGov/queryGovConfigList", params).then(
        (res) => {
          console.log("数据1", res);
          this.showData = res.data.data.dataList;
          this.total = res.data.data.total;

          this.showData.forEach((item, index) => {
            console.log("截取之前", this.showData[index]);
            //   let left = this.showData[index].location.split(" ");
            //   console.log(left);
            //   let nian = left[0].slice(0, 4);
            //   let yue = left[0].slice(4, 6);
            //   let ri = left[0].slice(6, 8);
            //   if (left[1]) {
            //     let shi = left[1].slice(0, 2);
            //     let fen = left[1].slice(2, 4);
            //     let miao = left[1].slice(4, 6);
            //     this.showData[index].location =nian+"-"+yue+"-"+ri+"&nbsp;"+shi+":"+fen+":"+miao;
            //   }
            //   //   let shi = this
            //   //   console.log(nian,yue,ri);
            //   this.showData[index].location =nian+"-"+yue+"-"+ri
            //   this.showData[index].location = this.shijianc(
            //     this.showData[index].location
            //   );
            //   console.log("截取之后", this.showData[index].location);
            if (item.status == 1) {
              item.status = true;
            } else if (item.status == 0) {
              item.status = false;
            }
          });
        }
      );
    },
    // 定时器 每隔多少时间获取一次后天数据
    setTime() {
      let that = this;
      setInterval(function () {
        // console.log("10秒一次");
        that.getDataferConfigList();
      }, 60000);
    },
    shijianc(time) {
      let date = new Date(time);
      let Y = date.getFullYear() + "-";
      let M =
        (date.getMonth() + 1 < 10
          ? "0" + (date.getMonth() + 1)
          : date.getMonth() + 1) + "-";
      let D =
        (date.getDate() < 10 ? "0" + date.getDate() : date.getDate()) + " ";
      let h =
        (date.getHours() < 10 ? "0" + date.getHours() : date.getHours()) + ":";
      let m =
        (date.getMinutes() < 10 ? "0" + date.getMinutes() : date.getMinutes()) +
        ":";
      let s =
        date.getSeconds() < 10 ? "0" + date.getSeconds() : date.getSeconds();
      return Y + M + D + h + m + s;
    },
    begin(item) {
      console.log(item.row);
      let params = null;
      if (item.row.status) {
        params = {
          govId: item.row.govId,
          status: "1",
        };
      } else if (item.row.status == false) {
        params = {
          govId: item.row.govId,
          status: "0",
        };
      }

      post("/api/idatamanage/dataGov/updateGovConfig", params).then((res) => {
        console.log("数据", res);
        //   this.showData = res.data.data.rows;
      });
    },
    jieyin(item) {
      this.dialogEdit = true;
      this.linshi = item.row.govId;
      console.log(item);
    },
    updateInfo() {
      // let locationTime = this.form.location.split("-");
      let params = {
        govId: this.linshi,
        rowNum: this.form.rowNum,
        // location: locationTime[0] + locationTime[1] + locationTime[2],
        location: this.form.location,
      };
      console.log(params);
      post("/api/idatamanage/dataGov/updateGovConfig", params).then((res) => {
        console.log("数据", res.data);
        if (res.data.message == "成功") {
          console.log("123?");
          this.$message({
            message: "更新成功",
            type: "success",
          });
          this.init();
        } else {
          this.$message({
            message: "更新失败",
            type: "error",
          });
        }
        //   this.showData = res.data.data.rows;
      });
    },
    // 点击的是第几页
    handleCurrentChange(currentPage) {
      this.listLoading = true;
      this.currentPage = currentPage;
      console.log(this.currentPage); //点击第几页
      this.getDataferConfigList();
    },
    // 时间设置
    addTime(item) {
      console.log(item);
    },
    // 给单元格绑定横向和竖向的index，这样就能确定是哪一个单元格
    tableCellClassName({ row, column, rowIndex, columnIndex }) {
      row.index = rowIndex;
      column.index = columnIndex;
    },
    // 获得当前双击的单元格的横竖index，然后拼接成一个唯一字符串用于判断，并赋给currentCell
    // 拼接后类似这样："1,0","1,1",
    dbclick(row, column) {
      this.currentCell = row.index + "," + column.index;
      // 这里必须要setTimeout，因为在点击的时候，input才刚被v-if显示出来，不然拿不到dom
      setTimeout(() => {
        // 双击后自动获得焦点
        this.$refs[row.index + "," + column.index].focus();
      });
    },
    hidePicker(scope) {
      console.log("失去焦点时触发", scope.row);
      console.log(scope.row.location);
      let locationString = scope.row.location;
      // let locationString = scope.row.location.toString()
      //   let locationTime = scope.row.location.split(" ");
      //   let timeleft = locationTime[0].split("-");
      //   let timeright = locationTime[1].split(":");
      //   let locationString =
      //     timeleft[0] +
      //     timeleft[1] +
      //     timeleft[2] +
      //     timeright[0] +
      //     timeright[1] +
      //     timeright[2];
      // let locationString =locationTime[0]+locationTime[1]
      console.log(locationString);
      let params = {
        govId: scope.row.govId,
        location: locationString,
      };
      console.log(params);

      post("/api/idatamanage/dataGov/updateGovConfig", params).then((res) => {
        console.log("数据", res);
        if (res.data) {
          this.$message({
            message: "更新成功",
            type: "success",
          });
          this.init();
        } else {
          this.$message({
            message: "更新失败",
            type: "error",
          });
        }
        // this.showData = res.data.data.rows;
      });
      this.currentCell = null;
    },
    editSource(res) {
      console.log(res);
      this.form = res;
      this.linshi = res.govId;
      this.dialogEdit = true;
    },
    // 当input失去焦点的时候，隐藏input
    hideInput(scope) {
      console.log("失去焦点时触发", scope.row);
      let params = {
        govId: scope.row.govId,
        rowNum: scope.row.rowNum,
      };
      console.log(params);
      post("/api/idatamanage/dataGov/updateGovConfig", params).then((res) => {
        console.log("数据", res);
        if (res.data) {
          this.$message({
            message: "更新成功",
            type: "success",
          });
          this.init();
        } else {
          this.$message({
            message: "更新失败",
            type: "error",
          });
        }
        //   this.showData = res.data.data.rows;
      });
      this.currentCell = null;
    },
  },
  watch: {
    // 如果路由发生变化，再次执行该方法
    $route(to, from) {
      console.log(to);
      console.log(from);
      this.getadd();
    },
  },
};
</script>
  <style src="../../assets/css/common.css"></style>
  <style lang="scss" scoped>
.main {
  // 最外层的盒子
  font-family: "宋体";
  display: flex;
  align-items: center;
  justify-content: center;
  align-content: center;
  height: 85vh;
}
::v-deep .el-table {
  th {
    background-color: red($color: #000000) !important;
  }
}
.el-form-item__label {
  color: #84f2ff !important;
}

.header-content {
  height: 66px;
  padding: 10px 20px;
}

// ::v-deep .el-table .cell {
//   font-size: 18px;
//   color: #c4d1dd;
// }

.div-el-pagination {
  display: flex;
  justify-content: flex-end;
  margin-top: 20px;
}
.el-table::before {
  content: "";
  position: absolute;
  background-color: transparent;
  z-index: 1;
}
::v-deep .el-table tr {
  background-color: transparent;
}
</style>